<template>
  <div id="smart-text">
    <editor-menu-bar :editor="editor">
      <div class="menubar" slot-scope="{ commands, isActive, getMarkAttrs  }">
        <button
          title="加粗"
          class="menubar__button"
          :class="{ 'is-active': isActive.bold() }"
          @click="commands.bold"
        >
          <icon name="icon-jiacu" />
        </button>

        <button
          title="倾斜"
          class="menubar__button"
          :class="{ 'is-active': isActive.italic() }"
          @click="commands.italic"
        >
          <icon name="icon-xieti" />
        </button>

        <button
          title="删除线"
          class="menubar__button"
          :class="{ 'is-active': isActive.strike() }"
          @click="commands.strike"
        >
          <icon name="icon-shanchuxian" />
        </button>

        <button
          title="下划线"
          class="menubar__button"
          :class="{ 'is-active': isActive.underline() }"
          @click="commands.underline"
        >
          <icon name="icon-xiahuaxian" />
        </button>

        <button
          title="行内代码"
          class="menubar__button"
          :class="{ 'is-active': isActive.code() }"
          @click="commands.code"
        >
          <icon name="icon-daima" />
        </button>

        <button
          title="段落"
          class="menubar__button"
          :class="{ 'is-active': isActive.paragraph() }"
          @click="commands.paragraph"
        >
          <icon name="icon-duanlawenben" />
        </button>

        <button
          title="左对齐"
          :class="{ 'is-active': getMarkAttrs('align').textAlign === 'left' }"
          @click="commands.align({ textAlign: 'left' })"
          class="menubar__button"
        >
          <icon name="icon-juzuo" />
        </button>

        <button
          title="居中"
          :class="{ 'is-active': getMarkAttrs('align').textAlign === 'center' }"
          @click="commands.align({ textAlign: 'center' })"
          class="menubar__button"
        >
          <icon name="icon-juzhong" />
        </button>

        <button
          title="右对齐"
          :class="{ 'is-active': getMarkAttrs('align').textAlign === 'right' }"
          @click="commands.align({ textAlign: 'right' })"
          class="menubar__button"
        >
          <icon name="icon-juyou" />
        </button>

        <button
          class="menubar__button"
          :class="{ 'is-active': isActive.heading({ level: 1 }) }"
          @click="commands.heading({ level: 1 })"
        >H1</button>

        <button
          class="menubar__button"
          :class="{ 'is-active': isActive.heading({ level: 2 }) }"
          @click="commands.heading({ level: 2 })"
        >H2</button>

        <button
          class="menubar__button"
          :class="{ 'is-active': isActive.heading({ level: 3 }) }"
          @click="commands.heading({ level: 3 })"
        >H3</button>

        <button
          title="无序列表"
          class="menubar__button"
          :class="{ 'is-active': isActive.bullet_list() }"
          @click="commands.bullet_list"
        >
          <icon name="icon-wuxuliebiao" />
        </button>

        <button
          title="有序列表"
          class="menubar__button"
          :class="{ 'is-active': isActive.ordered_list() }"
          @click="commands.ordered_list"
        >
          <icon name="icon-youxuliebiao" />
        </button>

        <button
          title="引用"
          class="menubar__button"
          :class="{ 'is-active': isActive.blockquote() }"
          @click="commands.blockquote"
        >
          <icon name="icon-yinyong" />
        </button>

        <button
          title="块代码"
          class="menubar__button"
          :class="{ 'is-active': isActive.code_block() }"
          @click="commands.code_block"
        >
          <icon name="icon-daima" />
        </button>

        <button title="分割线" class="menubar__button" @click="commands.horizontal_rule">
          <icon name="icon-fengexian" />
        </button>

        <button title="撤销" class="menubar__button" @click="commands.undo">
          <icon name="icon-undo" />
        </button>

        <button title="恢复" class="menubar__button" @click="commands.redo">
          <icon name="icon-redo" />
        </button>

        <!-- start about tables menubar -->
        <button title="添加单元格"
          class="menubar__button"
          @click="commands.createTable({rowsCount: 3, colsCount: 3, withHeaderRow: false })"
        >
          <icon name="icon-table" />
        </button>

        <span v-if="isActive.table()">
          <button title="删除表格" class="menubar__button" @click="commands.deleteTable">
            <icon name="icon-delete_table" />
          </button>
          <button title="在左侧添加列" class="menubar__button" @click="commands.addColumnBefore">
            <icon name="icon-add_col_after" />
          </button>
          <button title="在右侧添加列" class="menubar__button" @click="commands.addColumnAfter">
            <icon name="icon-add_col_before" />
          </button>
          <button title="删除列" class="menubar__button" @click="commands.deleteColumn">
            <icon name="icon-delete_col" />
          </button>
          <button title="在上侧添加行" class="menubar__button" @click="commands.addRowBefore">
            <icon name="icon-add_row_after" />
          </button>
          <button title="在下侧添加行" class="menubar__button" @click="commands.addRowAfter">
            <icon name="icon-add_row_before" />
          </button>
          <button title="删除行" class="menubar__button" @click="commands.deleteRow">
            <icon name="icon-delete_row" />
          </button>
          <button title="合并单元格" class="menubar__button" @click="commands.toggleCellMerge">
            <icon name="icon-combine_cells" />
          </button>
        </span>
        <!-- end abount tables -->

        <!-- srtart about 自定义组件 -->
          <button title="变量管理" class="menubar__button">
            <icon name="icon-canshupeizhi" />
          </button>
          
          <button title="上传附件" class="menubar__button">
            <icon name="icon-shangchuan" />
          </button>
        <!-- end about 自定义组件 -->

      </div>
    </editor-menu-bar>

    <!-- 选中显示的菜单 -->
    <editor-menu-bubble class="menububble" :editor="editor" @hide="hideVarsMenu" v-slot="{ commands, isActive, getMarkAttrs, menu }">
      <div
        class="menububble"
        :class="{ 'is-active': menu.isActive }"
        :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
      >
        <form class="menububble__form" v-if="linkMenuIsActive" @submit.prevent="setVarsCode(commands.vars, varsCode)">
          <input class="menububble__input" type="text" v-model="varsCode" placeholder="请输入变量code" ref="linkInput" @keydown.esc="hideVarsMenu"/>
          <button title="解绑变量" class="menububble__button" @click="setVarsCode(commands.vars, null)" type="button">
            <icon name="icon-remove" />
          </button>
        </form>

        <template v-else>
          <button
            class="menububble__button"
            @click="showVarsMenu(getMarkAttrs('vars'))"
            :class="{ 'is-active': isActive.vars() }"
          >
            <span>{{ isActive.vars() ? '解除绑定&nbsp;&nbsp;' : '绑定变量&nbsp;&nbsp;'}}</span>
            <icon :name="isActive.vars() ? 'icon-jiechu' : 'icon-bangding'" />
          </button>
        </template>

      </div>
    </editor-menu-bubble>
    <!-- 结束选中菜单 -->
    <editor-content class="editor__content" :editor="editor" />
  </div>
</template>

<script>
import Icon from "@/components/icon";
import { Editor, EditorContent, EditorMenuBar,EditorMenuBubble } from "tiptap";
import {
  Blockquote,
  CodeBlock,
  HardBreak,
  Heading,
  HorizontalRule,
  OrderedList,
  BulletList,
  ListItem,
  TodoItem,
  TodoList,
  Bold,
  Code,
  Italic,
  Strike,
  Underline,
  History,
  Table,
  TableHeader,
  TableCell,
  TableRow
} from "tiptap-extensions";

import Align from "@/assets/tiptap/js/Align.js";
// 变量
import Vars from "@/assets/tiptap/js/Vars.js";
// 附件
import Att from  "@/assets/tiptap/js/Att.js";
// 自定义 TrailingNode
import TrailingNode from "@/assets/tiptap/js/TrailingNode.js"
// import DragItem from  "@/assets/tiptap/js/DragItem.js";
export default {
  components: {
    EditorContent,
    EditorMenuBubble,
    EditorMenuBar,
    Icon
  },
  created(){
    this.editor.on('init',()=>{
      console.log('markdown 初始化...')
    })
    this.editor.on('update',({ getHTML })=>{
      const newContent = getHTML()
      console.log('markdown 修改...',newContent)
    })
  },
  methods:{
    showVarsMenu(attrs) {
      console.log('showVarsMenu: ',attrs)
      this.varsCode = attrs.code
      this.linkMenuIsActive = true
      this.$nextTick(() => {
        this.$refs.linkInput.focus()
      })
    },
    hideVarsMenu() {
      this.varsCode = null
      this.linkMenuIsActive = false
    },
    setVarsCode(command, code) {
      command({ 'code': code })
      this.hideVarsMenu()
    },
  },
  data() {
    return {
      editor: new Editor({
        extensions: [
          new Blockquote(),
          new BulletList(),
          new CodeBlock(),
          new HardBreak(),
          new Heading({ levels: [1, 2, 3] }),
          new HorizontalRule(),
          new ListItem(),
          new OrderedList(),
          new TodoItem(),
          new TodoList(),
          new Bold(),
          new Code(),
          new Italic(),
          new Strike(),
          new Underline(),
          new History(),
          new Align(),
          new Table({
            resizable: true
          }),
          new TableHeader(),
          new TableCell(),
          new TableRow(),
          // 保证有最后一空行
          new TrailingNode({
            node: "paragraph",
            notAfter: ["paragraph"],
          }),
          // 变量
          new Vars(),
          // 附件列表
          new Att(),
        ],
        content: `
          <!-- 这个是注释 -->
          <var code='nnn'> 这是变量 </var>
          <br />
          <att>图标	文件名	大小	删除</att>
          <h2>
            Hi there,
          </h2>
          <p>
            this is a very <em>basic</em> example of tiptap.
          </p>
          <pre><code>body { display: none; }</code></pre>
          <ul>
            <li>
              A regular list
            </li>
            <li>
              With regular items
            </li>
          </ul>
          <blockquote>
            It's amazing 👏
            <br />
            – mom
          </blockquote>
          <div data-type="att">
            Drag me!
          </div>
          <div data-type="att">
            Try it!
          </div>
          <div data-type="att">
            It works!
          </div>
        `,
        
      }),
      varsCode: null,
      linkMenuIsActive: false,
    };
  },
  beforeDestroy() {
    this.editor.destroy();
  }
};
</script>

<style lang="scss">
[data-type="att"] {
  display: flex;
  padding: 0.5rem;
  background-color: rgba(black, 0.05);
  margin-bottom: 0.5rem;
  border-radius: 2px;
  > :first-child {
    flex: 1 1 auto;
  }
  > :last-child {
    flex: 0 0 auto;
    margin-left: auto;
    cursor: move;
  }
}
</style>

<style lang="scss">
@import "../../assets/tiptap/scss/main.scss";
</style>


<style lang="scss" scoped>
#smart-text {
  flex: 1;
  height: 100vh;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  .editor__content {
    height: calc(100vh - 240px);
    ::v-deep .ProseMirror {
      overflow: auto;
      height: calc(100vh - 240px);
    }
  }

  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: #f5f5f5;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #f5f5f5;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #c8c8c8;
  }
}
</style>